<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>传统国学取名</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="chinese-style.css">
  <style>
    body {
      font-family: "FangSong", "仿宋", "SimSun", "宋体", serif;
      background-color: var(--rice-paper);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      position: relative;
    }
    
    .navbar {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      background-color: var(--rice-paper);
      border-bottom: 1px solid var(--ink-wash-2);
      position: relative;
    }
    
    .navbar:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--vermilion), var(--mountain-green), var(--indigo-blue));
      opacity: 0.5;
    }
    
    .back-button {
      color: var(--ink-gray);
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .main-container {
      padding: 24px 20px 100px;
      position: relative;
    }
    
    .content-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      position: relative;
      border-left: 3px solid var(--vermilion);
      overflow: hidden;
    }
    
    .content-card:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 Q40 40, 60 0' stroke='%23ab4529' stroke-width='0.8' fill='none' opacity='0.1'/%3E%3C/svg%3E");
      background-size: contain;
      opacity: 0.1;
    }
    
    .card-section {
      margin-bottom: 20px;
    }
    
    .section-title {
      font-weight: 600;
      font-size: 18px;
      color: var(--ink-black);
      margin-bottom: 16px;
      position: relative;
      padding-left: 14px;
    }
    
    .section-title:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background-color: var(--vermilion);
      border-radius: 2px;
      opacity: 0.8;
    }
    
    .form-item {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      font-size: 15px;
      color: var(--ink-gray);
      margin-bottom: 8px;
    }
    
    .input-box {
      width: 100%;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid var(--ink-wash-2);
      background-color: var(--rice-paper-light);
      font-size: 16px;
      color: var(--ink-black);
      transition: all 0.3s;
    }
    
    .input-box:focus {
      border-color: var(--vermilion);
      box-shadow: 0 0 0 2px rgba(171, 69, 41, 0.1);
      outline: none;
    }
    
    .input-box::placeholder {
      color: var(--stone-gray);
    }
    
    .validation-msg {
      color: var(--vermilion);
      font-size: 14px;
      margin-top: 6px;
    }
    
    .toggle-hint {
      text-align: right;
      cursor: pointer;
    }
    
    .hint-text {
      color: var(--indigo-blue);
      font-size: 14px;
      text-decoration: underline;
    }
    
    .date-picker, .time-picker {
      width: 100%;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid var(--ink-wash-2);
      background-color: var(--rice-paper-light);
      font-size: 16px;
      color: var(--ink-black);
      position: relative;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .picker-arrow {
      color: var(--stone-gray);
      font-size: 12px;
    }
    
    .has-value {
      color: var(--ink-black);
    }
    
    .lunar-container {
      background-color: var(--rice-paper-light);
      border-radius: 8px;
      padding: 12px;
      margin-top: 16px;
    }
    
    .lunar-info {
      display: flex;
      align-items: center;
    }
    
    .lunar-icon {
      margin-right: 8px;
    }
    
    .lunar-text {
      color: var(--ink-gray);
      font-size: 14px;
    }
    
    .primary-btn {
      width: 100%;
      background-color: var(--vermilion);
      color: white;
      padding: 16px;
      border-radius: 12px;
      text-align: center;
      font-weight: 600;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .primary-btn:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.5s;
    }
    
    .primary-btn:hover:before {
      left: 100%;
    }
    
    .primary-btn:active {
      transform: translateY(2px);
    }
    
    .primary-btn:disabled {
      background-color: var(--ink-wash-2);
      cursor: not-allowed;
    }
    
    .bazi-result {
      animation: fadeIn 0.5s ease forwards;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .bazi-grid {
      display: flex;
      margin: 20px 0;
    }
    
    .bazi-column {
      flex: 1;
      text-align: center;
      padding: 10px;
      background-color: var(--rice-paper-light);
      margin: 0 4px;
      border-radius: 8px;
    }
    
    .bazi-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--ink-black);
    }
    
    .wuxing-progress {
      margin: 20px 0;
    }
    
    .wuxing-item {
      margin-bottom: 12px;
    }
    
    .wuxing-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    
    .wuxing-element {
      font-size: 15px;
      color: var(--ink-black);
    }
    
    .wuxing-score {
      font-size: 15px;
      color: var(--indigo-blue);
      font-weight: 600;
    }
    
    .progress-bar {
      height: 8px;
      background-color: var(--rice-paper-light);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .progress-inner {
      height: 100%;
      background-color: var(--vermilion);
      border-radius: 4px;
      transition: width 0.5s ease;
    }
    
    .xiyongshen-info {
      display: flex;
      align-items: center;
      margin: 20px 0;
      background-color: rgba(171, 69, 41, 0.05);
      padding: 12px;
      border-radius: 8px;
    }
    
    .info-label {
      font-weight: 600;
      color: var(--ink-black);
      margin-right: 8px;
    }
    
    .info-value {
      color: var(--vermilion);
      font-weight: 600;
    }
    
    .xiyongshen-explain {
      margin-top: 20px;
    }
    
    .explain-title {
      font-weight: 600;
      color: var(--ink-black);
      margin-bottom: 8px;
      font-size: 16px;
    }
    
    .explain-content {
      color: var(--ink-gray);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    
    .name-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      border: 1px solid var(--ink-wash-2);
      position: relative;
      transition: all 0.3s;
    }
    
    .name-card:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      border-color: var(--ink-wash-1);
    }
    
    .name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .name-character {
      font-size: 26px;
      font-weight: 600;
      color: var(--ink-black);
      letter-spacing: 2px;
    }
    
    .name-meaning {
      font-size: 14px;
      color: var(--ink-gray);
      margin-top: 10px;
      line-height: 1.6;
    }
    
    .name-score {
      color: var(--indigo-blue);
      font-weight: 600;
    }
    
    .chinese-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      position: relative;
      background-color: var(--rice-paper-dark);
      color: var(--ink-gray);
      margin-right: 8px;
      margin-top: 8px;
      border: 1px solid var(--ink-wash-2);
    }
    
    .chinese-badge.red {
      color: var(--vermilion);
      border-color: var(--vermilion);
      background-color: rgba(171, 69, 41, 0.1);
    }
    
    .chinese-badge.green {
      color: var(--mountain-green);
      border-color: var(--mountain-green);
      background-color: rgba(42, 93, 67, 0.1);
    }
    
    .chinese-divider {
      height: 1px;
      background-color: var(--ink-wash-2);
      margin: 20px 0;
      position: relative;
    }
    
    .character-meaning {
      margin-top: 16px;
      background-color: var(--rice-paper-dark);
      border-radius: 12px;
      padding: 16px;
    }
    
    .character-row {
      display: flex;
      margin-bottom: 12px;
      align-items: flex-start;
    }
    
    .character-label {
      width: 80px;
      flex-shrink: 0;
      font-weight: 600;
      color: var(--ink-gray);
    }
    
    .character-value {
      flex: 1;
      color: var(--ink-gray);
    }
    
    .disclaimer {
      font-size: 12px;
      color: var(--stone-gray);
      text-align: center;
      margin-top: 20px;
    }
    
    .mountain-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
      opacity: 0.03;
    }
    
    .chinese-pattern {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 A60 60 0 0 1 60 0 A60 60 0 0 1 120 60 A60 60 0 0 1 60 120 A60 60 0 0 1 0 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3Cpath d='M30 60 A30 30 0 0 1 60 30 A30 30 0 0 1 90 60 A30 30 0 0 1 60 90 A30 30 0 0 1 30 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
      opacity: 0.03;
      z-index: -1;
    }
    
    .pattern-top-right {
      top: 0;
      right: 0;
    }
    
    .pattern-bottom-left {
      bottom: 100px;
      left: 0;
    }
    
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .names-result {
      display: none;
    }
    
    .names-result.active {
      display: block;
      animation: fadeIn 0.5s ease forwards;
    }
  </style>
</head>
<body>
  <!-- 背景装饰 -->
  <div class="mountain-bg">
    <img src="images/mountain-bg.svg" alt="山水背景" style="width:100%; height:100%; object-fit:cover;">
  </div>
  
  <div class="chinese-pattern pattern-top-right"></div>
  <div class="chinese-pattern pattern-bottom-left"></div>
  
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <a href="index.html" class="back-button">
      <i data-lucide="arrow-left" class="w-6 h-6"></i>
    </a>
    <div class="text-lg font-semibold">传统国学取名法</div>
  </div>
  
  <div class="main-container">
    <div class="header mb-4">
      <h1 class="text-2xl font-bold mb-2" style="color: var(--ink-black);">传统国学取名法</h1>
      <p class="text-base" style="color: var(--ink-gray);">根据喜用神推荐吉祥名字</p>
    </div>
    
    <!-- 喜用神直接输入部分 -->
    <div class="content-card">
      <div class="card-section">
        <div class="section-title">喜用神</div>
        
        <div class="form-item">
          <label class="form-label">你想起名用字属于哪些五行呢？</label>
          <input id="xiyongshenInput" class="input-box" placeholder="请输入喜用神(如：金木水)" />
          <div id="xiyongshenError" class="validation-msg" style="display: none;"></div>
        </div>
        
        <div class="toggle-hint" id="toggleBirthTimeBtn">
          <span class="hint-text">不知道喜用神？</span>
        </div>
      </div>
    </div>
    
    <!-- 出生时间部分 - 默认隐藏，点击"不知道喜用神"后显示 -->
    <div id="birthTimeSection" class="content-card" style="display: none;">
      <div class="card-section">
        <div class="section-title">通过出生时间推算</div>
        
        <div class="form-item">
          <label class="form-label">出生日期</label>
          <div id="datePicker" class="date-picker">
            <span id="dateValue">请选择出生日期</span>
            <span class="picker-arrow">▼</span>
          </div>
        </div>

        <div class="form-item">
          <label class="form-label">出生时间</label>
          <div id="timePicker" class="time-picker">
            <span id="timeValue">请选择出生时间</span>
            <span class="picker-arrow">▼</span>
          </div>
        </div>
      </div>

      <!-- 展示农历日期 -->
      <div id="lunarContainer" class="lunar-container" style="display: none;">
        <div class="lunar-info">
          <i data-lucide="info" class="w-5 h-5 mr-2" style="color: #666;"></i>
          <span id="lunarDate" class="lunar-text"></span>
        </div>
      </div>
    </div>

    <!-- 分析按钮 - 只在出生时间模式下显示 -->
    <button id="analyzeBtn" class="primary-btn" style="display: none;" disabled>
      计算八字
    </button>

    <!-- 生成名字按钮 - 在直接输入喜用神模式下显示，或已经计算出八字后显示 -->
    <button id="generateBtn" class="primary-btn" disabled>
      生成名字
    </button>

    <!-- 八字分析结果 -->
    <div id="baziResult" class="bazi-result" style="display: none;">
      <div class="content-card">
        <div class="card-section">
          <div class="section-title">阴历出生时间：生辰八字</div>
          
          <div class="bazi-grid">
            <div class="bazi-column">
              <div id="baziYear" class="bazi-value"></div>
            </div>
            <div class="bazi-column">
              <div id="baziMonth" class="bazi-value"></div>
            </div>
            <div class="bazi-column">
              <div id="baziDay" class="bazi-value"></div>
            </div>
            <div class="bazi-column">
              <div id="baziHour" class="bazi-value"></div>
            </div>
          </div>
        </div>

        <div class="card-section">
          <div class="section-title">传统文化中的平衡理念</div>
          
          <div id="wuxingProgress" class="wuxing-progress">
            <!-- 五行数据将通过JavaScript动态添加 -->
          </div>

          <div class="xiyongshen-info">
            <div class="info-label">喜用神：</div>
            <div id="xiyongshenValue" class="info-value"></div>
          </div>
          
          <!-- 喜用神说明 -->
          <div class="xiyongshen-explain">
            <div class="explain-title">生辰八字是什么？</div>
            <div class="explain-content">
              <p>出生时间 → 转换为 传统历法时间（年月日时），一般通过查询黄历即可得到，原理并不复杂，宝爸宝妈不要因为这个信息差被割韭菜了哟</p>
            </div>
            <div class="explain-title">喜用神与取名的关系</div>
            <div class="explain-content">
              <p>生辰八字中，每个字对应一种元素（如"壬=水"，"寅=木"），通过统计各元素数量，就得到了喜用神。
              在传统哲学体系中，通过元素互补来寻求平衡是重要的文化理念。根据生辰信息分析，可以发现某些元素属性可能相对薄弱，这些元素在传统文化中被认为需要适当补益。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 名字结果部分 -->
    <div id="namesResult" class="names-result">
      <div class="section-title">推荐名字</div>
      
      <div id="namesList">
        <!-- 名字卡片将通过JavaScript动态添加 -->
      </div>
    </div>
    
    <div class="disclaimer">
      * 内容依据传统文化研究整理，姓名选择请结合个人审美与实际情况
    </div>
  </div>
  
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
    
    document.addEventListener('DOMContentLoaded', function() {
      // 获取用户数据
      const formData = JSON.parse(localStorage.getItem('namingFormData') || '{}');
      
      // 页面元素
      const xiyongshenInput = document.getElementById('xiyongshenInput');
      const xiyongshenError = document.getElementById('xiyongshenError');
      const toggleBirthTimeBtn = document.getElementById('toggleBirthTimeBtn');
      const birthTimeSection = document.getElementById('birthTimeSection');
      const datePicker = document.getElementById('datePicker');
      const dateValue = document.getElementById('dateValue');
      const timePicker = document.getElementById('timePicker');
      const timeValue = document.getElementById('timeValue');
      const lunarContainer = document.getElementById('lunarContainer');
      const lunarDate = document.getElementById('lunarDate');
      const analyzeBtn = document.getElementById('analyzeBtn');
      const generateBtn = document.getElementById('generateBtn');
      const baziResult = document.getElementById('baziResult');
      const namesResult = document.getElementById('namesResult');
      const namesList = document.getElementById('namesList');
      
      // 八字相关元素
      const baziYear = document.getElementById('baziYear');
      const baziMonth = document.getElementById('baziMonth');
      const baziDay = document.getElementById('baziDay');
      const baziHour = document.getElementById('baziHour');
      const wuxingProgress = document.getElementById('wuxingProgress');
      const xiyongshenValue = document.getElementById('xiyongshenValue');
      
      let selectedDate = '';
      let selectedTime = '';
      let customXiyongshen = '';
      let isAnalyzing = false;
      let isGenerating = false;
      let baziInfo = null;
      
      // 初始化页面
      if (formData.surname) {
        // 如果有姓氏，默认使用
      } else {
        // 如果没有姓氏，使用默认姓氏"李"
        formData.surname = '李';
      }
      
      // 喜用神输入验证
      xiyongshenInput.addEventListener('input', function() {
        customXiyongshen = this.value.trim();
        
        if (customXiyongshen) {
          const validElements = ['金', '木', '水', '火', '土'];
          const invalidChars = [...customXiyongshen].filter(char => !validElements.includes(char));
          
          if (invalidChars.length > 0) {
            xiyongshenError.textContent = `请只输入有效的五行元素：金、木、水、火、土`;
            xiyongshenError.style.display = 'block';
            generateBtn.disabled = true;
          } else {
            xiyongshenError.style.display = 'none';
            generateBtn.disabled = false;
          }
        } else {
          xiyongshenError.style.display = 'none';
          generateBtn.disabled = true;
        }
      });
      
      // 切换到出生时间模式
      toggleBirthTimeBtn.addEventListener('click', function() {
        birthTimeSection.style.display = 'block';
        analyzeBtn.style.display = 'block';
        generateBtn.style.display = 'none';
      });
      
      // 日期选择
      datePicker.addEventListener('click', function() {
        // 这里应该显示日期选择器，简化为直接输入
        const date = prompt('请输入日期 (格式: YYYY-MM-DD)', selectedDate || '2000-01-01');
        if (date) {
          selectedDate = date;
          dateValue.textContent = date;
          dateValue.classList.add('has-value');
          updateAnalyzeButtonState();
        }
      });
      
      // 时间选择
      timePicker.addEventListener('click', function() {
        // 这里应该显示时间选择器，简化为直接输入
        const time = prompt('请输入时间 (格式: HH:MM)', selectedTime || '12:00');
        if (time) {
          selectedTime = time;
          timeValue.textContent = time;
          timeValue.classList.add('has-value');
          updateAnalyzeButtonState();
        }
      });
      
      // 更新分析按钮状态
      function updateAnalyzeButtonState() {
        analyzeBtn.disabled = !(selectedDate && selectedTime);
      }
      
      // 分析八字
      analyzeBtn.addEventListener('click', function() {
        if (isAnalyzing) return;
        
        isAnalyzing = true;
        analyzeBtn.innerHTML = '<span class="loading"></span> 分析中...';
        
        // 模拟分析过程
        setTimeout(function() {
          isAnalyzing = false;
          analyzeBtn.innerHTML = '计算八字';
          
          // 显示农历日期
          lunarContainer.style.display = 'block';
          lunarDate.textContent = '农历庚辰年六月初六 午时';
          
          // 显示八字结果
          baziResult.style.display = 'block';
          baziYear.textContent = '庚辰';
          baziMonth.textContent = '丙午';
          baziDay.textContent = '戊申';
          baziHour.textContent = '丁未';
          
          // 添加五行数据
          wuxingProgress.innerHTML = `
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">金</span>
                <span class="wuxing-score">3</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner" style="width: 60%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">木</span>
                <span class="wuxing-score">1</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner" style="width: 20%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">水</span>
                <span class="wuxing-score">1</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner" style="width: 20%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">火</span>
                <span class="wuxing-score">2</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner" style="width: 40%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">土</span>
                <span class="wuxing-score">3</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner" style="width: 60%"></div>
              </div>
            </div>
          `;
          
          // 设置喜用神
          xiyongshenValue.textContent = '木水';
          
          // 保存八字信息
          baziInfo = {
            year: '庚辰',
            month: '丙午',
            day: '戊申',
            hour: '丁未',
            xiyongshen: '木水'
          };
          
          // 显示生成名字按钮
          generateBtn.style.display = 'block';
          generateBtn.disabled = false;
        }, 2000);
      });
      
      // 生成名字
      generateBtn.addEventListener('click', function() {
        if (isGenerating) return;
        
        isGenerating = true;
        generateBtn.innerHTML = '<span class="loading"></span> 生成中...';
        
        // 获取喜用神
        const xiyongshen = baziInfo ? baziInfo.xiyongshen : customXiyongshen;
        
        // 模拟生成名字
        setTimeout(function() {
          isGenerating = false;
          generateBtn.innerHTML = '生成名字';
          
          // 显示名字结果
          namesResult.classList.add('active');
          
          // 添加名字卡片
          namesList.innerHTML = `
            <div class="name-card">
              <div class="name-row">
                <div class="name-character">${formData.surname}诗雅</div>
                <div class="name-score">98<span class="text-sm" style="color: var(--stone-gray);">分</span></div>
              </div>
              <div class="name-meaning">
                出自《论语》："诗，可以兴，可以观，可以群，可以怨。"诗雅一名寓意才华横溢，举止文雅，气质高贵。与喜用神${xiyongshen}五行相符。
              </div>
              <div class="flex flex-wrap mt-2">
                <span class="chinese-badge red">出处：《论语》</span>
                <span class="chinese-badge">书写优美</span>
                <span class="chinese-badge green">才情雅致</span>
              </div>
              
              <div class="chinese-divider"></div>
              
              <div class="character-meaning">
                <div class="character-row">
                  <div class="character-label">诗</div>
                  <div class="character-value">意为诗歌、诗篇。取名象征才华横溢、文采飞扬、内心丰富。五行属水。</div>
                </div>
                <div class="character-row">
                  <div class="character-label">雅</div>
                  <div class="character-value">意为文雅、高雅、典雅。取名象征举止得体、气质高贵、品行端正。五行属木。</div>
                </div>
              </div>
            </div>
            
            <div class="name-card">
              <div class="name-row">
                <div class="name-character">${formData.surname}子渊</div>
                <div class="name-score">96<span class="text-sm" style="color: var(--stone-gray);">分</span></div>
              </div>
              <div class="name-meaning">
                出自《诗经·小雅》："江之永矣，不可方思。"渊意为深水，寓意学识渊博，思想深邃。与喜用神${xiyongshen}五行相符。
              </div>
              <div class="flex flex-wrap mt-2">
                <span class="chinese-badge red">出处：《诗经》</span>
                <span class="chinese-badge">三才和谐</span>
                <span class="chinese-badge green">格调高远</span>
              </div>
              
              <div class="chinese-divider"></div>
              
              <div class="character-meaning">
                <div class="character-row">
                  <div class="character-label">子</div>
                  <div class="character-value">本义为儿子，引申为有学问、品德高尚的人。古代对人的尊称。五行属水。</div>
                </div>
                <div class="character-row">
                  <div class="character-label">渊</div>
                  <div class="character-value">意为深水、深邃。取名象征学识渊博、思想深刻、胸怀宽广。五行属水。</div>
                </div>
              </div>
            </div>
            
            <div class="name-card">
              <div class="name-row">
                <div class="name-character">${formData.surname}明志</div>
                <div class="name-score">94<span class="text-sm" style="color: var(--stone-gray);">分</span></div>
              </div>
              <div class="name-meaning">
                出自《礼记·大学》："大学之道，在明明德，在亲民，在止于至善。"明志寓意志向远大，目标明确。与喜用神${xiyongshen}五行相符。
              </div>
              <div class="flex flex-wrap mt-2">
                <span class="chinese-badge red">出处：《礼记》</span>
                <span class="chinese-badge">读音清亮</span>
                <span class="chinese-badge green">寓意深远</span>
              </div>
              
              <div class="chinese-divider"></div>
              
              <div class="character-meaning">
                <div class="character-row">
                  <div class="character-label">明</div>
                  <div class="character-value">意为明亮、清楚、明白。取名象征头脑清晰、聪明睿智、光明磊落。五行属火。</div>
                </div>
                <div class="character-row">
                  <div class="character-label">志</div>
                  <div class="character-value">意为志向、志气、意志。取名象征意志坚定、目标远大、胸怀大志。五行属木。</div>
                </div>
              </div>
            </div>
          `;
        }, 2000);
      });
    });
  </script>
</body>
</html> 